<template>
  <div id='contianer_dialog'>
    <!-- 预览 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="previewVisible"
      center
      class="fullscreen_preview"
      fullscreen
      @close="handleDialogClose">
      <div slot="title" class="header_button">
        <img :src="addForm.like==1?require('@/assets/images/heart_fill.png'):require('@/assets/images/heart.png')" class="icon"
             @click="changeLike"/>
        <span>{{ addForm.likeNumber || '' }}</span>
        <img :src="addForm.collect == 1?require('@/assets/images/collect_yes.png'):require('@/assets/images/collect_no.png')" class="icon"
             @click="changeCollect()"/>
        <span>{{ addForm.collectNumber || '' }}</span>
      </div>
      <iframe
        id="iframe"
        ref="iframe"
        frameborder="0"
        height="100%"
        src=""
        width="100%"
      ></iframe>
    </el-dialog>
    <!-- 预览视频 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="videoVideoVisible"
      center
      class="fullscreen_preview"
      fullscreen @close="handleDialogClose">
      <div slot="title" class="header_button">
        <img :src="addForm.like==1?require('@/assets/images/heart_fill.png'):require('@/assets/images/heart.png')" class="icon"
             @click="changeLike"/>
        <span>{{ addForm.likeNumber || '' }}</span>
        <img :src="addForm.collect == 1?require('@/assets/images/collect_yes.png'):require('@/assets/images/collect_no.png')" class="icon"
             @click="changeCollect()"/>
        <span>{{ addForm.collectNumber || '' }}</span>
      </div>
      <div class="video_model">
        <div id="video"></div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      previewVisible: false,
      videoVideoVisible: false,
      previewLoading: false,
      //pdf、视频预览
      addForm: {
        like: 0,
        collect: 0,
        likeNumber: 0,
        collectNumber: 0,
        selected: false
      },
      collectLikeId: ''
    }
  },
  methods: {

    //pdf、视频预览
    changeLike() {
      let url = this.addForm.like == 1 ? '/knowledgeCollect/delete' : '/knowledgeCollect/add'
      this.$http({
        url: url,
        method: 'post',
        data: {
          collectType: 1,
          knowledgeFileId: this.collectLikeId
        }
      }).then(({data}) => {
        if (data.code == 200) {
          this.$message.success(this.addForm.like == 1 ? '取消点赞成功' : '点赞成功')
          this.getCollectLike()
        }
      })
    },
    changeCollect() {
      let url = this.addForm.collect == 1 ? '/knowledgeCollect/delete' : '/knowledgeCollect/add'
      this.$http({
        url: url,
        method: 'post',
        data: {
          collectType: 2,
          knowledgeFileId: this.collectLikeId
        }
      }).then(({data}) => {
        console.log(data, 'llll')
        if (data.code == 200) {
          this.$message.success(this.addForm.collect == 1 ? '取消收藏成功' : '收藏成功')
          this.getCollectLike()
        }
      })
    },
    getCollectLike() {
      this.$http({
        url: '/knowledgeData/addView',
        method: 'post',
        data: {
          id: this.collectLikeId
        }
      }).then(({data}) => {
        this.addForm = data.data
      })
    },
    handleDialogClose() {
      // 清空 iframe 的 src 属性
      this.$refs.iframe.src = ''
      this.previewVisible = false
      this.videoVideoVisible = false
      this.$emit('close')
    },
    initFn(row) {
      if (row.fileType == 'video') {
        this.videoVideoVisible = true
      } else {
        this.previewVisible = true
      }
      this.collectLikeId = row.id
      this.getCollectLike()
      this.$http({
        url: '/knowledgeData/release/preview',
        method: 'get',
        params: {
          id: row.id
        }
      }).then(({data}) => {
        console.log('文件预览', data.data)
        if (data.data.readAuthority == false) {
          this.$message.warning('当前文件不可预览')
          return
        }
        if (row.fileType == 'video') {
          this.videoVideoVisible = true
          setTimeout(() => {
            new this.$Player({
              id: 'video', // 元素id
              lang: 'zh', // 设置中文
              volume: 0, // 默认静音
              autoplay: false, // 自动播放
              screenShot: false, // 开启截图功能
              height: 200,
              // 视频地址
              url: this.$config.VUE_APP_BASE_API+data.data.downloadUrl,
              // 封面图
              // poster:'',
              fluid: true, // 填满屏幕 （流式布局）
              playbackRate: [0.5, 0.75, 1, 1.5, 2] // 传入倍速可选数组
            })
          }, 300)
          return
        }
        console.log('获取文件之后地址', this.$config.VUE_APP_BASE_API+data.data.downloadUrl)
        this.previewVisible = true
        setTimeout(() => {
          var iframe = document.querySelector('#iframe')
          this.populateIframe(
            iframe,
            [['token', +localStorage.getItem('token')]],
            this.$config.VUE_APP_BASE_API+data.data.downloadUrl
          )
        }, 0)
      })
    },
    populateIframe(iframe, headers, url) {
      var xhr = new XMLHttpRequest()
      xhr.open('GET', url)
      xhr.responseType = 'blob'
      headers.forEach((header) => {
        xhr.setRequestHeader(header[0], header[1])
      })
      // xhr.setRequestHeader("X-Amz-Server-Side-Encryption-Customer-Key-MD5", "m7AXuOLSaEQc1369IHCZGw==")
      // xhr.setRequestHeader("X-Amz-Server-Side-Encryption-Customer-Algorithm", "AES256")
      // xhr.setRequestHeader("X-Amz-Server-Side-Encryption-Customer-Key", "5svVq6aMjTLMBTD0yaIT9u735QnpHteabx6nFZUXvac=")
      xhr.onreadystatechange = () => {
        if (xhr.readyState === xhr.DONE) {
          if (xhr.status === 200) {
            console.log(URL.createObjectURL(xhr.response), 'ffff')
            this.previewUrl = URL.createObjectURL(xhr.response)
            console.log('预览地址', URL.createObjectURL(xhr.response))
            iframe.src =
              './static/pdfjs/web/viewer.html?file=' +
              URL.createObjectURL(xhr.response)
          }
        }
      }
      xhr.send()
    }

  }
}
</script>
<style lang='scss' scoped>
// #contianer_dialog {
// width: 100%;
// height: 100%;
// position:absolute
// }
/*.preview ::v-deep.el-dialog {
  margin-top: 0px !important;
}

.preview ::v-deep.el-dialog__body {
  width: 100vw !important;
  height: 96.6vh !important;
}*/
</style>
